import React, { Component } from 'react'
import { CopyOutlined, PlayCircleOutlined, RedoOutlined } from '@ant-design/icons';
import { UnControlled as CodeMirror } from 'react-codemirror2'
import { message } from 'antd'
import 'codemirror/lib/codemirror.js';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/solarized.css';
import 'codemirror/mode/javascript/javascript';
//ctrl+空格代码提示补全
import 'codemirror/addon/hint/show-hint.css'; // start-ctrl+空格代码提示补全
import 'codemirror/addon/hint/show-hint.js';
import 'codemirror/addon/hint/anyword-hint.js'; // end
//代码高亮
import 'codemirror/addon/selection/active-line';
//折叠代码
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/comment-fold.js';
let theEditor: any
let theCode = ''
let theValue = ''
export default class editorCode extends Component<any, any>{
	constructor(props: any) {
		super(props)
		this.state = {
			area: 8,
			codeData: ''
		}
	}

	componentDidMount = () => {
		this.getCode()
	}
	componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any) {
		const { selectUrl } = this.props
		if (prevProps.selectUrl !== selectUrl) {
			this.getCode()
		}
	}

	/**
	 * 获取html文件的内容
	 */
	getCode = () => {
		const { selectUrl } = this.props
		var rq = new XMLHttpRequest();
		rq.open('GET', selectUrl, false);
		rq.overrideMimeType('text/html;charset=utf-8')
		rq.send(null);


		const ifr: any = document.getElementById('codeIframe')
		const ifrdoc = ifr.contentWindow.document
		ifrdoc.open()
		ifrdoc.write(rq.responseText)
		ifrdoc.close()


		theCode = rq.responseText
		this.setState({
			codeData: rq.responseText
		})
	}

	//复制
	copy = (e: any) => {
		navigator.clipboard.writeText(theValue);
		message.success('复制成功')
	}

	//运行
	run = () => {
		const ifr: any = document.getElementById('codeIframe')
		const ifrdoc = ifr.contentWindow.document
		ifrdoc.open()
		ifrdoc.write(theValue)
		ifrdoc.close()
	}


	//还原
	toReturn = () => {
		this.getCode()
		theEditor.setValue(theCode)
	}


	changeCode = (editor: any, data: any, value: any) => {
		theEditor = editor
		theValue = value
	}

	render() {
		return (
			<div className='Editor-code'>
				<div className='code'>
					<div className='code_bar'>
						<span className='txt'>源代码编辑器</span>
						<span className='copy' onClick={this.copy}><CopyOutlined />复制</span>
						<span className='run' onClick={this.run}><PlayCircleOutlined />运行</span>
						<span className='return' onClick={this.toReturn}><RedoOutlined />还原</span>
					</div>
					<CodeMirror
						value={theCode}
						options={{
							mode: 'javascript', //定义mode
							theme: 'solarized', //选中的theme
							styleActiveLine: true, //光标代码高亮
							lineNumbers: true, //显示行号
							smartIndent: true, //自动缩进
							lineWrapping: false,
							foldGutter: true,
							gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], //end
							matchBrackets: true, //括号匹配，光标旁边的括号都高亮显示
							autoCloseBrackets: true //键入时将自动关闭()[]{}''""
						}}
						onChange={this.changeCode}
					/>
				</div>
				<iframe id="codeIframe" > </iframe>
			</div>

		)
	}
}
